<template>
  <div class="paper-container">
    <!-- 头部区域 -->
    <header class="paper-header">
      <div class="header-content">
        <h1>学术研究成果展示</h1>
        <p class="subtitle">基于区块链的供应链金融系统设计与实现</p>
        <div class="header-decoration">
          <div class="decoration-circle circle-1"></div>
          <div class="decoration-circle circle-2"></div>
          <div class="decoration-circle circle-3"></div>
        </div>
      </div>
    </header>

    <!-- 主要内容区域 -->
    <main class="main-content">
      <!-- 个人信息和论文信息区域 -->
      <div class="top-section">
        <!-- 个人信息卡片 -->
        <el-card class="info-card profile-card">
          <div slot="header" class="card-header">
            <i class="el-icon-user-solid header-icon"></i>
            <span>个人信息</span>
          </div>
          <div class="profile-content">
            <!-- 头像区域 -->
            <div class="avatar-section">
              <div class="avatar-container">
                <div class="avatar-wrapper">
                  <img :src="avatarUrl" alt="头像" class="avatar-img" v-if="avatarUrl">
                  <div class="avatar-placeholder" v-else>
                    <i class="el-icon-user"></i>
                  </div>
                </div>
                <div class="avatar-upload-overlay">
                  <el-upload
                    class="avatar-uploader"
                    action="#"
                    :auto-upload="false"
                    :on-change="handleAvatarChange"
                    :show-file-list="false"
                    accept="image/*"
                  >
                    <el-button size="small" type="primary" icon="el-icon-upload">更换头像</el-button>
                  </el-upload>
                </div>
              </div>
              <div class="profile-name">
                <h3>刘海翔</h3>
                <p>数据科学与大数据技术</p>
              </div>
            </div>

            <!-- 基本信息 -->
            <div class="info-details">
              <div class="info-row">
                <div class="info-item">
                  <i class="el-icon-office-building"></i>
                  <div class="info-content">
                    <label>学院</label>
                    <span>工程技术学院</span>
                  </div>
                </div>
                <div class="info-item">
                  <i class="el-icon-reading"></i>
                  <div class="info-content">
                    <label>年级</label>
                    <span>2022级</span>
                  </div>
                </div>
              </div>
              <div class="info-row">
                <div class="info-item">
                  <i class="el-icon-document"></i>
                  <div class="info-content">
                    <label>学号</label>
                    <span>116420220098</span>
                  </div>
                </div>
                <div class="info-item">
                  <i class="el-icon-user"></i>
                  <div class="info-content">
                    <label>指导教师</label>
                    <span>刘教授</span>
                  </div>
                </div>
              </div>
              <div class="info-row">
                <div class="info-item full-width">
                  <i class="el-icon-message"></i>
                  <div class="info-content">
                    <label>联系方式</label>
                    <span>liuhaixiang@example.com</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-card>

        <!-- 论文基本信息卡片 -->
        <el-card class="info-card paper-main-info">
          <div slot="header" class="card-header">
            <i class="el-icon-document header-icon"></i>
            <span>论文基本信息</span>
          </div>
          <div class="paper-main-content">
            <div class="paper-title-section">
              <h3>论文题目</h3>
              <p>基于区块链的供应链金融系统设计与实现</p>
            </div>
            <div class="paper-info-grid">
              <div class="paper-info-item">
                <div class="info-icon">
                  <i class="el-icon-search"></i>
                </div>
                <div class="info-text">
                  <h4>研究方向</h4>
                  <p>区块链技术、供应链金融、分布式系统</p>
                </div>
              </div>
              <div class="paper-info-item">
                <div class="info-icon">
                  <i class="el-icon-time"></i>
                </div>
                <div class="info-text">
                  <h4>完成时间</h4>
                  <p>2025年5月</p>
                </div>
              </div>
              <div class="paper-info-item">
                <div class="info-icon">
                  <i class="el-icon-trophy"></i>
                </div>
                <div class="info-text">
                  <h4>论文评定</h4>
                  <p>优秀</p>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </div>

      <!-- 论文摘要卡片 -->
      <el-card class="paper-abstract-card">
        <div slot="header" class="card-header">
          <i class="el-icon-edit-outline header-icon"></i>
          <span>论文摘要</span>
        </div>
        <div class="abstract-content">
          <p>本论文研究了基于区块链技术的供应链金融系统，设计并实现了一个去中心化的金融服务平台。系统采用联盟链架构，整合了供应链各参与方的数据，通过智能合约自动执行交易和风控流程，显著提升了供应链金融的效率和安全性。研究成果表明，该系统能够有效解决传统供应链金融中的信任问题、信息不对称等痛点，为中小企业融资提供了新的解决方案。</p>
        </div>
      </el-card>

      <!-- 研究成果区域 -->
      <div class="achievements-section">
        <h2 class="section-title">研究成果</h2>

        <div class="achievements-grid">
          <!-- 学术论文 -->
          <el-card class="achievement-card">
            <div slot="header" class="card-header">
              <i class="el-icon-notebook-2 header-icon"></i>
              <span>学术论文</span>
            </div>
            <div class="achievement-content">
              <div class="achievement-item">
                <div class="achievement-date">2024年12月</div>
                <div class="achievement-details">
                  <h4>联盟链在供应链金融中的应用研究</h4>
                  <p>发表于《计算机科学》期刊，第一作者</p>
                </div>
              </div>
              <div class="achievement-item">
                <div class="achievement-date">2025年1月</div>
                <div class="achievement-details">
                  <h4>基于智能合约的自动风控机制设计</h4>
                  <p>发表于《计算机研究与发展》期刊，第二作者</p>
                </div>
              </div>
            </div>
          </el-card>

          <!-- 项目经历 -->
          <el-card class="achievement-card">
            <div slot="header" class="card-header">
              <i class="el-icon-s-management header-icon"></i>
              <span>项目经历</span>
            </div>
            <div class="achievement-content">
              <div class="achievement-item">
                <div class="achievement-date">2024年9月-2025年5月</div>
                <div class="achievement-details">
                  <h4>区块链供应链金融平台开发</h4>
                  <p>负责系统架构设计和智能合约开发，项目获得校级优秀毕业设计</p>
                </div>
              </div>
              <div class="achievement-item">
                <div class="achievement-date">2024年4月-2024年8月</div>
                <div class="achievement-details">
                  <h4>企业供应链管理系统改造</h4>
                  <p>参与将传统供应链系统与区块链技术集成，提升系统透明度</p>
                </div>
              </div>
            </div>
          </el-card>

          <!-- 专利和软件著作权 -->
          <el-card class="achievement-card">
            <div slot="header" class="card-header">
              <i class="el-icon-files header-icon"></i>
              <span>专利和软件著作权</span>
            </div>
            <div class="achievement-content">
              <div class="achievement-item">
                <div class="achievement-date">2025年4月</div>
                <div class="achievement-details">
                  <h4>一种基于区块链的供应链金融交易方法</h4>
                  <p>发明专利，申请号：202510012347.8</p>
                </div>
              </div>
              <div class="achievement-item">
                <div class="achievement-date">2025年3月</div>
                <div class="achievement-details">
                  <h4>区块链供应链金融管理系统</h4>
                  <p>软件著作权，登记号：2025SR0123458</p>
                </div>
              </div>
            </div>
          </el-card>

          <!-- 获奖情况 -->
          <el-card class="achievement-card">
            <div slot="header" class="card-header">
              <i class="el-icon-medal header-icon"></i>
              <span>获奖情况</span>
            </div>
            <div class="achievement-content">
              <div class="achievement-item">
                <div class="achievement-date">2025年5月</div>
                <div class="achievement-details">
                  <h4>校级优秀毕业设计一等奖</h4>
                  <p>工程技术学院</p>
                </div>
              </div>
              <div class="achievement-item">
                <div class="achievement-date">2024年11月</div>
                <div class="achievement-details">
                  <h4>全国大学生区块链技术应用大赛一等奖</h4>
                  <p>中国计算机学会</p>
                </div>
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  name: 'LiuhaixiangPaperHome',
  data() {
    return {
      avatarUrl: ''
    }
  },
  methods: {
    handleAvatarChange(file) {
      const reader = new FileReader();
      reader.onload = (e) => {
        this.avatarUrl = e.target.result;
        this.$message.success('头像上传成功');
      };
      reader.readAsDataURL(file.raw);
    }
  }
}
</script>

<style scoped>
.paper-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
}

/* 头部区域样式 */
.paper-header {
  background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
  color: white;
  padding: 40px 20px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
}

.paper-header h1 {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 15px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.subtitle {
  font-size: 20px;
  opacity: 0.9;
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.6;
}

.header-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.decoration-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}

.circle-1 {
  width: 100px;
  height: 100px;
  top: 10%;
  left: 10%;
}

.circle-2 {
  width: 150px;
  height: 150px;
  bottom: 10%;
  right: 10%;
}

.circle-3 {
  width: 80px;
  height: 80px;
  top: 50%;
  right: 20%;
}

/* 主要内容区域 */
.main-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 20px;
}

/* 顶部区域布局 */
.top-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
  margin-bottom: 25px;
}

/* 卡片通用样式 */
.info-card, .paper-abstract-card, .achievement-card {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  border: none;
  background: white;
}

.info-card:hover, .paper-abstract-card:hover, .achievement-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

.card-header {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
  padding: 18px 24px;
  border-bottom: 1px solid #e8e8e8;
  background-color: #fafbfc;
  display: flex;
  align-items: center;
}

.header-icon {
  margin-right: 10px;
  color: #3498db;
  font-size: 20px;
}

/* 个人信息卡片 */
.profile-content {
  padding: 24px;
}

.avatar-section {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
  padding-bottom: 25px;
  border-bottom: 1px solid #f0f0f0;
}

.avatar-container {
  position: relative;
  width: 100px;
  height: 100px;
  margin-right: 20px;
}

.avatar-wrapper {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid #e8f4fd;
  box-shadow: 0 4px 10px rgba(52, 152, 219, 0.2);
}

.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #3498db 0%, #2c3e50 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: white;
}

.avatar-upload-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 8px 0;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 0 0 45px 45px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.avatar-container:hover .avatar-upload-overlay {
  opacity: 1;
}

.profile-name h3 {
  font-size: 22px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 5px;
}

.profile-name p {
  color: #7f8c8d;
  font-size: 15px;
}

/* 信息详情样式 */
.info-details {
  width: 100%;
}

.info-row {
  display: flex;
  margin-bottom: 16px;
}

.info-item {
  display: flex;
  align-items: center;
  flex: 1;
  padding: 12px 0;
}

.info-item.full-width {
  flex: 0 0 100%;
}

.info-item i {
  font-size: 18px;
  color: #3498db;
  margin-right: 12px;
  width: 24px;
  text-align: center;
}

.info-content {
  flex: 1;
}

.info-content label {
  display: block;
  font-size: 13px;
  color: #7f8c8d;
  margin-bottom: 4px;
}

.info-content span {
  display: block;
  font-size: 15px;
  color: #2c3e50;
  font-weight: 500;
}

/* 论文基本信息卡片 */
.paper-main-content {
  padding: 24px;
}

.paper-title-section {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.paper-title-section h3 {
  font-size: 16px;
  color: #7f8c8d;
  margin-bottom: 8px;
  font-weight: 500;
}

.paper-title-section p {
  font-size: 18px;
  color: #2c3e50;
  font-weight: 600;
  line-height: 1.5;
}

.paper-info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.paper-info-item {
  display: flex;
  align-items: flex-start;
}

.info-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: linear-gradient(135deg, #3498db 0%, #2c3e50 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  flex-shrink: 0;
}

.info-icon i {
  color: white;
  font-size: 18px;
}

.info-text h4 {
  font-size: 16px;
  color: #2c3e50;
  margin-bottom: 5px;
  font-weight: 600;
}

.info-text p {
  font-size: 14px;
  color: #7f8c8d;
  line-height: 1.5;
}

/* 论文摘要卡片 */
.paper-abstract-card {
  margin-bottom: 30px;
}

.abstract-content {
  padding: 24px;
}

.abstract-content p {
  font-size: 16px;
  line-height: 1.8;
  color: #2c3e50;
  text-align: justify;
}

/* 研究成果区域 */
.achievements-section {
  margin-top: 40px;
}

.section-title {
  font-size: 28px;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 30px;
  text-align: center;
  position: relative;
  padding-bottom: 15px;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: linear-gradient(135deg, #3498db 0%, #2c3e50 100%);
  border-radius: 2px;
}

.achievements-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
}

.achievement-content {
  padding: 20px;
}

.achievement-item {
  display: flex;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid #f0f0f0;
}

.achievement-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.achievement-date {
  flex: 0 0 120px;
  font-size: 14px;
  font-weight: 600;
  color: #3498db;
  margin-right: 20px;
  padding-top: 2px;
}

.achievement-details h4 {
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 8px;
  line-height: 1.4;
}

.achievement-details p {
  font-size: 14px;
  color: #7f8c8d;
  line-height: 1.5;
}

/* 响应式设计 */
@media (max-width: 992px) {
  .top-section {
    grid-template-columns: 1fr;
  }

  .achievements-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .paper-header h1 {
    font-size: 28px;
  }

  .subtitle {
    font-size: 18px;
  }

  .info-row {
    flex-direction: column;
  }

  .info-item {
    margin-bottom: 15px;
  }

  .avatar-section {
    flex-direction: column;
    text-align: center;
  }

  .avatar-container {
    margin-right: 0;
    margin-bottom: 15px;
  }

  .achievement-item {
    flex-direction: column;
  }

  .achievement-date {
    margin-right: 0;
    margin-bottom: 10px;
    flex: none;
  }
}

@media (max-width: 480px) {
  .paper-header {
    padding: 30px 15px;
  }

  .paper-header h1 {
    font-size: 24px;
  }

  .subtitle {
    font-size: 16px;
  }

  .main-content {
    padding: 20px 15px;
  }

  .card-header {
    padding: 15px 20px;
  }

  .profile-content, .paper-main-content, .abstract-content, .achievement-content {
    padding: 20px;
  }
}
</style>
